基于前后端分离技术做增删改查操作（SpringBoot+Mybatis Plus+Vue）

2024-06-25 14:07| 来源: 网络整理| 查看: 265

通过SpringBoot后端项目，mybatis plus，和前端Vue来实现前后端分离技术

第一步： 1、准备sql

本项目主要实现两张表的增删改查（老师+专业）+分页

CREATE TABLE `teacher` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) DEFAULT NULL, `age` int(11) DEFAULT NULL, `sex` int(255) DEFAULT NULL, `hobby` varchar(255) DEFAULT NULL, `birthday` date DEFAULT NULL, `mid` int(11) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8; CREATE TABLE `major` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8; 2、sql准备完毕

添加数据即可

第二步：

搭建后端项目

后端项目还是跟我们之前编写的代码一样

1、创建项目

这是之前讲解的使用SpringBoot开发的详细步骤（可以参考）

使用SpringBoot开发（完整项目）_java spring boot 项目开发-CSDN博客

2、加入依赖

你需要什么你就拿什么依赖

8 UTF-8 3.5.2 8.0.30 4.12 3.0.0 1.18.24 5.8.5 1.2.11 2.13.4 2.0.23 2.11.0 1.9.7 1.3.1 3.12.0 6.2.3.Final 5.2.0 junit junit ${junit.version} test org.projectlombok lombok ${lombok.version} provided org.springframework.boot spring-boot-starter-web cn.hutool hutool-all ${hutool.version} mysql mysql-connector-java ${mysql.version} com.baomidou mybatis-plus-boot-starter ${mybatis-plus.version} com.baomidou mybatis-plus-generator 3.4.0 org.apache.velocity velocity 1.7 com.alibaba.fastjson2 fastjson2 ${fastjson2.version} org.aspectj aspectjweaver ${aspectj-weaver.version} org.springframework.boot spring-boot-starter-aop commons-codec commons-codec org.apache.commons commons-lang3 ${commons-lang3.version} commons-io commons-io ${commonsio.version} org.springframework.boot spring-boot-starter-data-redis org.springframework.boot spring-boot-starter-test org.hibernate.validator hibernate-validator 6.2.3.Final com.github.pagehelper pagehelper-spring-boot-starter 1.4.0 com.aliyun tea-openapi 0.2.5 com.aliyun dysmsapi20170525 2.0.20 com.aliyun.oss aliyun-sdk-oss 3.15.1 commons-fileupload commons-fileupload ${commons-fileupload.version} org.apache.poi poi 3.14 org.apache.poi poi-ooxml 3.14 org.freemarker freemarker 2.3.31 org.springframework.boot spring-boot-starter-quartz org.springframework.boot spring-boot-starter-amqp org.springframework.boot spring-boot-devtools org.springframework.boot spring-boot-maven-plugin 3、创建启动类 package cn.jiyun; import org.mybatis.spring.annotation.MapperScan; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication @MapperScan("cn.jiyun.mapper") public class Application { public static void main(String[] args) { SpringApplication.run(Application.class,args); System.out.println("启动成功"); } }

之前的博客中也讲到了SpringBootApplication注解的作用

SpringBoot运行原理（超详细！！！面试必考）-CSDN博客

4、添加application.yml配置文件 server: port: 82 #端口号 spring: mvc: pathmatch: matching-strategy: ant_path_matcher rabbitmq: host: 127.0.0.1 #rabbitmq的ip地址 username: guest #用户名 password: guest #密码 virtual-host: / #空间 redis: host: 127.0.0.1 port: 6379 # password: 123456 # 连接超时时间（毫秒） timeout: 5000ms # 连接池配置 jedis: pool: # 连接池最大连接数（使用负值表示没有限制） max-active: 8 # 连接池最大阻塞等待时间（使用负值表示没有限制） max-wait: 1ms # 连接池中的最大空闲连接 max-idle: 8 # 连接池中的最小空闲连接 min-idle: 0 datasource: driver-class-name: com.mysql.cj.jdbc.Driver #驱动 url: jdbc:mysql://127.0.0.1:3306/qizhongb?useSSL=false #数据库地址 username: root #用户名 password: aaaa #密码 # 允许循环依赖 main: allow-circular-references: true # mybatis-plus配置 mybatis-plus: configuration: # 打印sql log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # mapper xml路径 mapper-locations: classpath:mapper/*.xml

这里面配置了redis，rabbitmq

（注意！！！前后端项目的端口号尽量不一样）

5、编写controller层，service层，mapper层 1、controller层 package cn.jiyun.controller; import cn.jiyun.mapper.MajorMapper; import cn.jiyun.pojo.Major; import cn.jiyun.pojo.Teacher; import cn.jiyun.service.TeacherService; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.rmi.CORBA.Stub; import java.util.List; @RestController @CrossOrigin @RequestMapping("teacher") public class TeacherController { @Autowired private TeacherService teacherService; @Autowired private MajorMapper majorMapper; @RequestMapping("teacherList") public Page teacherList(int current , int size, @RequestBody Teacher teacher){ System.out.println(teacher.getName()); return teacherService.teacherList(current,size,teacher); } @RequestMapping("findById") public Teacher findById(Integer id){ return teacherService.findById(id); } @RequestMapping("findAll") public List findAll(){ return majorMapper.selectList(null); } @RequestMapping("addTeacher") public Boolean addTeacher(@RequestBody Teacher teacher){ return teacherService.addTeacher(teacher); } @RequestMapping("delById") public Boolean delById(Integer id){ return teacherService.delById(id); } @RequestMapping("updateTeacher") public Boolean updateTeacher(@RequestBody Teacher teacher){ return teacherService.updateTeacher(teacher); } } 2、service层 1、service接口层 package cn.jiyun.service; import cn.jiyun.pojo.Teacher; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; public interface TeacherService { Page teacherList(int current, int size, Teacher teacher); Boolean addTeacher(Teacher teacher); Boolean updateTeacher(Teacher teacher); Teacher findById(Integer id); Boolean delById(Integer id); } 2、service实现类层 package cn.jiyun.service.impl; import cn.jiyun.mapper.TeacherMapper; import cn.jiyun.pojo.Teacher; import cn.jiyun.service.TeacherService; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import javax.xml.ws.Action; @Service public class TeacherServiceImpl implements TeacherService { @Autowired private TeacherMapper teacherMapper; @Override public Page teacherList(int current, int size, Teacher teacher) { Page page = new Page(current, size); page=teacherMapper.teacherList(page,teacher); return page; } @Override public Boolean addTeacher(Teacher teacher) { teacherMapper.insert(teacher); return true; } @Override public Boolean updateTeacher(Teacher teacher) { teacherMapper.updateById(teacher); return true; } @Override public Teacher findById(Integer id) { Teacher teacher = teacherMapper.selectById(id); return teacher; } @Override public Boolean delById(Integer id) { teacherMapper.deleteById(id); return true; } } 3、mapper层 package cn.jiyun.mapper; import cn.jiyun.pojo.Teacher; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import org.apache.ibatis.annotations.Param; public interface TeacherMapper extends BaseMapper { Page teacherList(Page page,@Param("vo") Teacher teacher); } 6、编写mapper.xml文件 select t.*,m.name mname from teacher t join major m on m.id=t.mid and t.name like '%${vo.name}%' 7、整体后端项目就是这样的

第三步：

搭建前端项目

前端项目搭建好之后，开始编写代码

1、首先我们要先用两个命令来下载axios和elelementUI 1、npm i element-ui 2、npm i axios

当上面两个命令执行之后，我们看package.json里面的内容（相当于后端项目的maven依赖），有了这两个就证明是下载成功了

3、成功之后我们需要在main.js中添加相应的包 import axios from 'axios' //Vue对象使用axios Vue.prototype.axios = axios; //导入组件库 import ElementUI from 'element-ui' //导入组件相关样式 import 'element-ui/lib/theme-chalk/index.css' //配置Vue插件将El安装到Vue上 Vue.use(ElementUI); 2、接下来我们编写相关的页面（展示所有+分页、添加、修改）

.vue页面中包含的是

（前端代码）和（js代码）

我们之前写的普通项目中定义全局变量和方法是通过Vue对象来实现的，现在用了前后端fen'li'ji我们也有一种方式是通过 export default{}来实现

1、展示所有的前端代码 export default { data() { return { page: {}, pageParam: { current: 1, size: 4 }, requestParam: {}, majorList:[], } }, methods: { initData() { axios.post(`http://localhost:82/teacher/teacherList?current=${this.pageParam.current}&size=${this.pageParam.size}`, this.requestParam).then(res => { this.page = res.data; }) }, //当每页最大展示条数发生改变的时候执行--> handleSizeChange(val) { this.pageParam.size = val; this.initData(); }, handleCurrentChange(val) { this.pageParam.current = val; this.initData(); }, toAddPage(){ this.$router.push("/add"); }, initMajorData(){ axios.post(`http://localhost:82/teacher/findAll`).then(res => { this.majorList = res.data; }) }, handleEdit(id){ this.$router.push({ path: '/update', query:{id:id} }) }, handleDel(id){ this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { axios.post("http://localhost:82/teacher/delById?id="+id).then(res=>{ if(res.data){ this.$message.success("成功") this.initData(); } }) }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); } }, created() { this.initData(); this.initMajorData(); } } import axios from "axios"; 姓名：搜索添加 {{ scope.row.sex == 1 ? '男' : '女' }} {{ scope.row.birthday|format('yyyy-MM-dd') }} 编辑删除

（另外axios我是在show页面又导了包，所以在上面才能直接使用axios.post()，否则只能通过this.axios.post()）

2、添加的前端代码 import axios from "axios"; export default { data() { return { hobbyArr: [], majorList: [], form: {}, formLabelWidth: "200px", dialogFormVisible: true, } }, methods: { addTeacher() { this.form.hobby=this.hobbyArr.join(","); axios.post(`http://localhost:82/teacher/addTeacher`, this.form).then(res => { if (res.data) { this.$message.success("成功") this.dialogFormVisible = false; this.$router.push("/"); } }) }, initMajorData() { axios.post(`http://localhost:82/teacher/findAll`).then(res => { this.majorList = res.data; }) }, quxiao(){ this.dialogFormVisible=false; this.$router.push("/"); } }, created() { this.initMajorData(); } } 男女取消确定 3、修改的前端代码 import axios from "axios"; export default { data() { return { hobbyArr: [], majorList: [], form: {}, formLabelWidth: "200px", dialogFormVisible: true, } }, methods: { addTeacher() { this.form.hobby=this.hobbyArr.join(","); axios.post(`http://localhost:82/teacher/updateTeacher`, this.form).then(res => { if (res.data) { this.$message.success("成功") this.dialogFormVisible = false; this.$router.push("/"); } }) }, quxiao(){ this.dialogFormVisible=false; this.$router.push("/"); }, initMajorData() { axios.post(`http://localhost:82/teacher/findAll`).then(res => { this.majorList = res.data; }) }, findById(id) { this.form.hobby=this.hobbyArr.join(","); axios.post(`http://localhost:82/teacher/findById?id=`+id).then(res => { this.form = res.data; this.hobbyArr=this.form.hobby.split(","); }) } }, created() { // this.initData(); var id = this.$route.query.id; this.initMajorData(); this.findById(id); } } 男女取消确定

添加和修改没啥区别，修改就是多了一个数据的回显，在show页面将id传递到update页面，然后axios向后台发送请求，返回一个对象，然后赋值给form表单，就完成了回显，需要特别注意的是hobby爱好是复选框，需要单独处理，以上代码中有处理方法

3、页面写好了，但是会不会跳转呢？以及如何解决？

答：不会的，因为我们前端项目主要是靠路由来实现的，我们到目前为止并没有配置路由

解决方案： 1、找到router包下的index.js 2、给文件中添加相应的路径以及改路径会跳转到的页面 import Vue from 'vue' import VueRouter from 'vue-router' import HomeView from '../views/HomeView.vue' import LoginView from '../views/LoginView.vue' import HelloView from '../views/HelloView.vue' import ShowView from '../views/ShowView.vue' import AddView from '../views/AddView.vue' import UpdateView from '../views/UpdateView.vue' Vue.use(VueRouter) const routes = [ { path: '/home', name: 'home', component: HomeView }, { path: '/update', name: 'update', component: UpdateView }, { path: '/add', name: 'add', component: AddView }, { path: '/login', name: 'login', component: LoginView }, { path: '/', name: 'show', component: ShowView }, { path: '/hello', name: 'hello', component: HelloView }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') } ] const router = new VueRouter({ routes }) export default router 4、前端项目整体

（注意！！！前后端项目的端口号尽量不一样）

前端项目额端口号默认是8080

第四步

运行项目

1、运行前端项目

可以在idea上控制台通过npm run -serve，也可以点击package.json里面的

2、运行后端项目

点击启动类的三角

【本文地址】

公司简介

联系我们